import React from 'react';
import {Form, Input, Modal, message, Select, InputNumber} from 'antd';
import {PermissApi} from '@/api/index'

export default class Add extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            parentId: null,
            parentName: ''
        };
        this.formRef = React.createRef();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.modalVisible !== this.state.modalVisible) {
            this.setState({
                modalVisible: nextProps.modalVisible,
                parentId: nextProps.parentId,
                parentName: nextProps.parentName
            });
        }
    }

    handleOk = async e => {
        let data = await this.formRef.current.validateFields();
        data.parentId = this.state.parentId
        let ret = await PermissApi.add(data)
        if (ret && ret.code === 200) {
            message.success('增加权限成功！');
            this.onClose()
            this.setState({
                modalVisible: false,
            });
        }
    };

    handleCancel = async e => {
        this.onClose()
        this.setState({
            modalVisible: false,
        });
    };

    onClose() {
        this.props.onClose && this.props.onClose()
    }

    render() {

        const {Option} = Select;

        return (
            <Modal
                title={"增加权限"}
                open={this.state.modalVisible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                destroyOnClose={true}
            >
                <Form ref={this.formRef} wrapperCol={{span: 14}} labelCol={{span: 6}}>
                    <Form.Item name="parentName" label="父节点" initialValue={this.state.parentName}>
                        <Input maxLength={20} disabled/>
                    </Form.Item>
                    <Form.Item name="type" label="类型" initialValue={1}>
                        <Select>
                            <Option value={1}>菜单</Option>
                            <Option value={2}>按钮</Option>
                            <Option value={3}>数据</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="name" label="名称" rules={[{required: true, message: "请输入名称"}]}>
                        <Input maxLength={20} allowClear autoComplete={"off"}/>
                    </Form.Item>
                    <Form.Item name="express" label="表达式">
                        <Input maxLength={40} allowClear autoComplete={"off"}/>
                    </Form.Item>
                    <Form.Item name="url" label="URL">
                        <Input maxLength={20} allowClear autoComplete={"off"}/>
                    </Form.Item>
                    <Form.Item name="sort" label="排序">
                        <InputNumber allowClear autoComplete={"off"} style={{width:'100%'}}/>
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}
